<template>
  <div class="conMain" >
    <el-card >
      <div style="text-align: right;" >
        <el-button icon="el-icon-arrow-left" size="small" class="pan-back-btn mb10" @click="goback">返回</el-button>
      </div>
      <div class='mt20' style="padding:0px 50px 0px 20px;">
        <el-form ref="ruleForm" :model="sub" :rules="rules" label-width="110px" @submit.native.prevent>
          <el-row :gutter="10">
            <el-col >
              <el-form-item label="标题：" prop="title" >
                <el-input v-model="sub.title" placeholder="请输入" />
              </el-form-item>
            </el-col>

            <el-col >
              <el-form-item  class="ue-content" label="内容：" prop="content">
                <ueditorFrom v-model="sub.content" :content="sub.content"/>
              </el-form-item>
            </el-col>

            <el-col  class="mb20" style="text-align: right;">
              <el-button  size="medium" >重置</el-button>
              <el-button class="ml20" size="medium" type="primary" @click="subForm('ruleForm')">确定</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>

import { agree_edit,agree_edit_post} from  '@/api/cms'
import ueditorFrom from '@/components/ueditorFrom'

export default {
  components: { ueditorFrom },
  data() {
    return {

      sub:{
        id:'',
        title:'',
        content:'',
      },
      rules: {
          title: [
              { required: true, message: '协议标题不能为空', trigger: 'blur' },
          ],
          content: [
              { required: true, message: '协议内容不能为空', trigger: 'blur' },
          ],
      },
    }
  },
  created() {
    if(this.$route.query.id){
      agree_edit({id:this.$route.query.id}).then(res => {
         const row =res.data.row
         this.sub={
          id:row.id,
          title:row.title,
          content:row.content,
        }
      })
    }

  },
  methods: {
    goback() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    //数据提交
    subForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            agree_edit_post(this.sub).then(res => {
                this.$message.success(res.msg);
            })
            this.$router.go(-1)
          } else {
            return false;
          }
      });
    },
    modalPicTap (tit, num, i) {
      const _this = this
      _this.$modalUpload(function(img) {
        if(tit==='1'&& !num){
           _this.sub.image = img[0]
        }
        if(tit==='2'&& !num){
          img.map((item) => {
            _this.sub.images.push(item)
            if(_this.sub.images.length > 8) _this.sub.images.length = 8
          });
        }
      },tit)
    },
    delImages (i) {
      this.sub.images.splice(i, 1);
    },
    // 移动
    handleDragStart (e, item) {
      this.dragging = item;
    },
    handleDragEnd (e, item) {
      this.dragging = null
    },
    handleDragOver (e) {
      e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      e.dataTransfer.effectAllowed = 'move'
      if (item === this.dragging) {
        return
      }
      const newItems = [...this.sub.images]
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(item)
      newItems.splice(dst, 0, ...newItems.splice(src, 1))
      this.sub.images = newItems;
    },
    add(){
      this.$modalForm(category_add({type:this.activeType})).then(() => this.getList())
    },


  },

}
</script>

<style lang="scss" scoped>


</style>
